import { lazy, Suspense } from 'react'
import { Router, Route, Switch, Redirect } from 'react-router-dom'

import { Spin } from 'antd'

// 导入自定义的history对象
import { customHistory } from './utils'
import './App.scss'

import { AuthRoute } from '@/components/AuthRoute'
// 使用 AuthRoute 组件，替换Route组件

// 导入页面
const Login = lazy(() => import('@/pages/Login'))
const Layout = lazy(() => import('@/pages/Layout'))
const NotFound = lazy(() => import('@/pages/NotFound'))

export const App = () => {
  return (
    <Router history={customHistory}>
      {/* 使用 Suspense 组件包裹所有内容 */}
      <Suspense
        fallback={
          <div className="loading">
            <Spin tip="加载中..." />
          </div>
        }
      >
        <div className="app">
          <Switch>
            {/* 
            exact 表示：让路由变为精确匹配，
            也就是说只有路由地址为 / 才匹配当前路由来实现重定向功能：
            也就是进入项目时，就匹配默认路由然后直接重定向到 /home 页面
          */}
            <Route exact path="/" render={() => <Redirect to="/home" />} />
            {/* <Route path="/home" component={Layout} /> */}
            <AuthRoute path="/home" component={Layout} />
            <Route path="/login" component={Login} />

            {/* 404 */}
            <Route>
              <NotFound />
            </Route>
          </Switch>
        </div>
      </Suspense>
    </Router>
  )
}

// export default App
